<script setup>
import { ref, reactive, computed } from 'vue';
import { useRouter ,useRoute} from 'vue-router';
import { ElMessage } from 'element-plus';
import { useUserStore } from '../../stores/index.js';
import { onMounted } from 'vue';
import request from '@/utils/request.js'

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const mode = route.query.mode;

// 基本资料
const basicInfo = ref({
  nickname: '',
  major: '',
  grade: '',
  intro: ''
});

// 课程添加相关逻辑
// 1. 所有课程类型
const allCourseTypes = ref({});
 const getCourseTypes = async () => {
   try {
     const res = await request.get('/getCourseTypes');
     if (res.status === 200) {
      // 转换函数：根据类型名称动态生成键名（去除"类"字，转为小写英文）
        const arrayToObject = (arr) => {
          const obj = {};
          // 定义类型名称到键名的转换规则（通用适配）
          const nameToKey = (typeName) => {
            // 移除"类"字，转为小写拼音对应的英文（或自定义规则）
            const keyMap = {
              '数学': 'math',
              '物理': 'physics',
              '计算机': 'computer',
              '英语': 'english',
              '思政': 'politics',
              '通识': 'general_knowledge'
              // 更多类型...
              // 未来新增类型在这里补充映射即可
            };
            // 提取"类"字前面的部分（如"数学类"→"数学"）
            const baseName = typeName.replace('类', '');
            return keyMap[baseName] || baseName.toLowerCase(); // 兜底：直接用小写名称
          };

          arr.forEach(typeName => {
            const key = nameToKey(typeName);
            obj[key] = typeName; // 构建 { key: 类型名称 } 结构
          });
          return obj;
        };

        // 转换后的对象（自动适配数组变化）
        allCourseTypes.value = arrayToObject(res.data);

     } else {
       ElMessage.error('获取课程类型失败');
     }
   } catch (err) {
     console.error(err);
     ElMessage.error('网络请求错误');
   }

 };
 onMounted(() => {
   getCourseTypes();
 });
// 2. 课程类型与课程的映射关系

const serverCourseMap = ref({}); // 存储后端返回的「类型key: 课程数组」结构
const filteredCourses = ref([]); // 存储筛选后的课程（供下拉框渲染）
const selectedTypes = ref([]); // 已选中的课程类型（如 ['math', 'computer']）

const getCoursesByType = async () => {
  try {
    // 关键：给后端传「选中的类型名称」（需和后端 SQL 中存储的 type 字段一致，比如 '数学类'）
    // 先把 selectedTypes 的 key 转成名称（比如 'math' → '数学类'）
    const typeNames = selectedTypes.value.map(key => {
      const keyToName = {
        math: '数学类',
        physics: '物理类',
        computer: '计算机类',
        english: '英语类',
        politics: '思政类',
        general_knowledge: '通识类',
        // 更多类型...
        // 未来新增类型在这里补充映射即可

      };
      return keyToName[key];
    });

    // 发送请求（和 getCourseTypes 一样用 async/await + request）
    const res = await request.get('/getCoursesByType', {
      params: { types: typeNames } // 给后端传类型数组，如 ['数学类', '计算机类']
    });

    if (res.status === 200) {
      // 3. 把后端返回的课程数组，整理成和本地 courseMap 一致的结构
      // 后端返回的 res.data 格式假设是：[{ id:1, name:'高等数学', type:'数学类' }, ...]
      const tempMap = {};
      res.data.forEach(course => {
        // 把课程类型名称转成 key（比如 '数学类' → 'math'），和本地结构对齐
        const nameToKey = {
              // '数学': 'math',
              // '物理': 'physics',
              // '计算机': 'computer',
              // '英语': 'english',
              // '思政': 'politics',
              // '通识': 'general_knowledge'
              '数学类': 'math',
              '物理类': 'physics',
              '计算机类': 'computer',
              '英语类': 'english',
              '思政类': 'politics',
              '通识类': 'general_knowledge'
              // 更多类型...
              // 未来新增类型在这里补充映射即可
        };
        const typeKey = nameToKey[course.type];
        // 按类型key分组，生成 { math: [...], computer: [...]} 结构
        if (!tempMap[typeKey]) tempMap[typeKey] = [];
        tempMap[typeKey].push({ id: course.id, name: course.name });
      });
      serverCourseMap.value = tempMap; // 更新到响应式变量
      updateFilteredCourses(); // 同步更新筛选后的课程（供下拉框渲染）
    } else {
      ElMessage.error('获取课程失败：' + res.message);
    }
  } catch (err) {
    console.error('调用 getCoursesByType 接口错误：', err);
    ElMessage.error('网络错误，无法获取课程');
  }
};
const updateFilteredCourses = () => {
  if (selectedTypes.value.length === 0) {
    filteredCourses.value = [];
    return;
  }
  // 从接口返回的 serverCourseMap 中，筛选出选中类型对应的课程
  filteredCourses.value = selectedTypes.value.flatMap(typeKey => {
    return serverCourseMap.value[typeKey] || [];
  });
};
// 4. 处理课程类型选择（限制最多3个）
const handleTypeChange = async () => {
  if (selectedTypes.value.length > 3) {
    selectedTypes.value = selectedTypes.value.slice(0, 3);
    ElMessage.warning('课程类型最多选择3个');
  }
  // 选中类型变化后，调用接口获取对应课程（核心联动逻辑）
  await getCoursesByType();
};
// 6. 选中的课程（最多3个）
const selectedCourses = ref([]);

// 7. 处理课程选择提示
const handleCourseChange = () => {

  if (selectedCourses.value.length === 4) {
    ElMessage.info('已选3门课程，最多可添加3门');
  }
};

// 8. 已选课程详情
const selectedCoursesDetail = computed(() => {
  return filteredCourses.value.filter(course =>
    selectedCourses.value.includes(course.id)
  );
});

// 9. 移除课程
const removeCourse = (id) => {
  selectedCourses.value = selectedCourses.value.filter(courseId => courseId !== id);
};

// 学习偏好
const studyTime = ref('晚7-9点');
const studyMethod = ref('边学边记型');
const communication_frequency = ref('每周1次');


// };
const saveAndEnter = async () => {
  // 第一步：前端先做基础校验（避免无效请求，和后端校验呼应）
  if (!userStore.userId) { // 确保用户ID存在
    ElMessage.warning('用户未登录，请先登录');
    return false;
  }
  if (!basicInfo.value.major || !basicInfo.value.grade||!basicInfo.value.nickname) { // 专业、年级必传
    ElMessage.warning('昵称或专业或年级不能为空');
    return false;
  }
  if (!['1','2','3','4'].includes(basicInfo.value.grade)) { // 年级格式校验
    ElMessage.warning('年级必须是1-4的数字');
    return false;
  }
  if (selectedCourses.value.length > 3) { // 课程数量限制
    ElMessage.warning('最多只能选择3门课程');
    return false;
  }

  // 第二步：组装后端需要的参数格式
  const submitData = {
    userId: userStore.userId, // 必传：用户ID（从store获取，避免硬编码）
    basicInfo: { // 基本资料：和后端basicInfo字段对应
      major: basicInfo.value.major,
      grade: basicInfo.value.grade,
      intro: basicInfo.value.intro || '' ,// 简介可选，默认空字符串
      nickname: basicInfo.value.nickname,
    },
    preferences: { // 学习偏好：注意后端字段名是studyStyle（前端是studyMethod）
      studyTime: studyTime.value, // 对应后端study_time
      studyStyle: studyMethod.value, // 前端studyMethod → 后端study_style（字段名对应！）
      communication_frequency: communication_frequency.value // 对应后端communication_frequency
    },
    courseIds: selectedCourses.value // 选中的课程ID数组（后端必传，允许空数组）
  };

  // 第三步：发送POST请求调用接口
  try {
    const res = await request.post('/submitUserInfo', submitData); // 接口地址按实际改

    // 第四步：处理后端响应
    if (res.status === 200) {
      ElMessage.success(res.message || '信息提交成功');
      return true;
    } else {
      // 后端返回错误（如参数错误、课程不存在）
      ElMessage.error(res.message || '提交失败，请重试');
      return false;
    }
  } catch (err) {
    // 捕获网络错误（如接口地址错、后端挂了）
    console.error('提交信息接口报错：', err);
    ElMessage.error('网络错误，提交失败，请检查网络');
    return false;
  }
};
const handleSaveAndSubmit = async () => {
  const success = await saveAndEnter();
  if (success) {
    if(mode=='完善信息'){
      router.push('/login');
    }
    else{
      router.push('/headYes');
    }
  }
};
</script>

<template>
  <div class="info-form-container">
    <h2 class="form-title">完善你的信息，帮你找到更合适的学习伙伴</h2>

    <div class="steps-nav">
      <span class="step-item ">1.基本资料</span>
      <span class="step-item">2.课程添加</span>
      <span class="step-item">3.学习偏好</span>
    </div>

    <div class="form-content">
      <!-- 基本资料板块 -->
      <div class="form-section">
        <div class="section-head">
          <span class="required-mark">*</span>
          <h3 class="section-title">基本资料</h3>
        </div>
        <el-input
          v-model="basicInfo.nickname"
          placeholder="请输入昵称"
          class="form-input"
        ></el-input>
        <el-input
          v-model="basicInfo.major"
          placeholder="请输入专业"
          class="form-input"
        ></el-input>
        <el-input
          v-model="basicInfo.grade"
          placeholder="请输入年级(大一填1，大二填2以此类推)"
          class="form-input"
        ></el-input>
        <el-input
          v-model="basicInfo.intro"
          placeholder="请输入个人简介（不超过200字）"
          class="form-input intro-input"
          type="textarea"
          :rows="4"
          :maxlength="200"
          show-word-limit
        ></el-input>
      </div>

      <!-- 课程添加板块（两框结构+最多选3个） -->
      <div class="form-section">
        <div class="section-head">
          <span class="required-mark">*</span>
          <h3 class="section-title">课程添加</h3>
        </div>

        <!-- 第一个框：多选课程类型（最多3个） -->
        <div class="course-type-selector">
          <div class="selector-header">
            <h4>选择课程类型（可多选）</h4>
            <span v-if="selectedTypes.length >= 3" class="limit-tip">最多选择3个类型</span>
          </div>
          <el-checkbox-group
            v-model="selectedTypes"
            class="checkbox-group"
            @change="handleTypeChange"
          >
            <el-checkbox
              v-for="(typeName, typeKey) in allCourseTypes"
              :key="typeKey"
              :value="typeKey"
              class="checkbox-item"
              :disabled="selectedTypes.length >= 3 && !selectedTypes.includes(typeKey)"
            >
              {{ typeName }}
            </el-checkbox>
          </el-checkbox-group>
        </div>

        <!-- 第二个框：根据类型显示对应课程（最多3个） -->
        <div class="course-list">
          <h4>可选课程（可多选）</h4>
          <el-select
            v-model="selectedCourses"
            multiple
            placeholder="请先选择课程类型"
            class="form-input"
            :multiple-limit="3"
            @change="handleCourseChange"
            :disabled="selectedTypes.length === 0"
          >
            <el-option
              v-for="course in filteredCourses"
              :key="course.id"
              :label="course.name"
              :value="course.id"
            ></el-option>
          </el-select>
          <span v-if="selectedCourses.length >= 3" class="limit-tip">最多选择3门课程</span>
        </div>

        <!-- 已选课程展示 -->
        <div class="added-courses">
          <h4>已选课程</h4>
          <div class="course-tags" v-if="selectedCoursesDetail.length > 0">
            <span
              v-for="course in selectedCoursesDetail"
              :key="course.id"
              class="course-tag"
            >
              {{ course.name }}
              <el-button
                icon="el-icon-close"
                class="tag-remove-btn"
                @click="removeCourse(course.id)"
              ></el-button>
            </span>
          </div>
          <div class="empty-tip" v-else>
            暂无已选课程
          </div>
        </div>
      </div>

      <!-- 学习偏好板块 -->
      <div class="form-section">
        <div class="section-head">
          <span class="required-mark">*</span>
          <h3 class="section-title">学习偏好</h3>
        </div>
        <div class="preference-group">
          <h4 class="preference-title">常用学习时间</h4>
          <el-radio-group v-model="studyTime" class="radio-group">
            <el-radio value="早8-10点" class="radio-item">早8-10点</el-radio>
            <el-radio value="午12-2点" class="radio-item">午12-2点</el-radio>
            <el-radio value="晚7-9点" class="radio-item">晚7-9点</el-radio>
          </el-radio-group>
        </div>
        <div class="preference-group">
          <h4 class="preference-title">学习方式偏好</h4>
          <el-radio-group v-model="studyMethod" class="radio-group">
            <el-radio value="安静刷题型" class="radio-item">安静刷题型</el-radio>
            <el-radio value="讨论交流型" class="radio-item">讨论交流型</el-radio>
            <el-radio value="边学边记型" class="radio-item">边学边记型</el-radio>
          </el-radio-group>
        </div>
        <div class="preference-group">
          <h4 class="preference-title">学习沟通频率</h4>
          <el-radio-group v-model="communication_frequency" class="radio-group">
            <el-radio value="每天" class="radio-item">每天</el-radio>
            <el-radio value="每周1次" class="radio-item">每周1次</el-radio>
            <el-radio value="每周2次" class="radio-item">每周2次</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>

    <el-button type="primary" class="submit-btn" @click="handleSaveAndSubmit">
      保存并进入首页
    </el-button>
  </div>
</template>



<style>
/* 容器基础样式 */
.info-form-container {
  width: 1100px;
  margin: 40px auto;
  padding: 35px;
  background-color: #f8fff9;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(43, 138, 62, 0.06);
}

/* 标题样式 */
.form-title {
  text-align: center;
  margin: 0 0 35px;
  font-size: 26px;
  color: #2b8a3e;
  font-weight: 600;
}

/* 步骤导航 */
.steps-nav {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin: 0 0 45px;
  padding-bottom: 0;
  border-bottom: none;
}

.step-item {
  font-size: 18px;
  color: #2b8a3e;
  font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  transition: color 0.3s ease;
}


/* 表单内容区域 */
.form-content {
  display: flex;
  gap: 40px;
  margin: 0 0 45px;
}

.form-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 25px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e6f4ea;
}

/* 板块头部 */
.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.required-mark {
  color: #38a169;
  font-size: 18px;
  line-height: 1;
}

.section-title {
  margin: 0;
  font-size: 18px;
  color: #2b8a3e;
  font-weight: 500;
}

/* 输入框/选择器 */
.form-input {
  width: 100%;
  height: 42px;
  border-color: #e6f4ea;
  border-radius: 6px;
}

.form-input:focus {
  border-color: #38a169;
  box-shadow: 0 0 0 2px rgba(56, 161, 105, 0.1);
}

/* 个人简介文本框 */
.intro-input {
  resize: none;
  min-height: 100px;
  height: auto;
}

/* 字数统计 */
.el-input__count {
  color: #66b182;
  font-size: 13px;
}

/* 课程添加区域样式 */
.course-type-selector, .course-list, .added-courses {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h4 {
  margin: 0;
  font-size: 15px;
  color: #495057;
  font-weight: 500;
}

.limit-tip {
  font-size: 12px;
  color: #f56c6c;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 0;
}

.checkbox-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* 已选课程标签 */
.added-courses {
  margin-top: 10px;
}

.course-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 5px 0;
}

.course-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background-color: #f0fff4;
  border: 1px solid #c2e7cb;
  border-radius: 20px;
  color: #2b8a3e;
  font-size: 14px;
}

.tag-remove-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 12px;
  color: #2b8a3e;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-remove-btn:hover {
  background-color: rgba(43, 138, 62, 0.1);
}

.empty-tip {
  color: #999;
  font-size: 14px;
  padding: 10px 0;
}

/* 学习偏好区域 */
.preference-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preference-title {
  margin: 0;
  font-size: 15px;
  color: #495057;
  font-weight: 500;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-item {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 单选框/复选框选中态 */
.el-radio__input.is-checked .el-radio__inner {
  border-color: #38a169;
  background-color: #38a169;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: #38a169;
  background-color: #38a169;
}

/* 提交按钮 */
.submit-btn {
  display: block;
  margin: 0 auto;
  width: 220px;
  height: 46px;
  font-size: 16px;
  background-color: #38a169;
  border-color: #38a169;
  border-radius: 8px;
}

.submit-btn:hover {
  background-color: #2b8a3e;
  border-color: #2b8a3e;
}
</style>
